<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input
				class="input"
				type="text"
				:value="addressData.username"
				placeholder="收货人姓名"
				placeholder-class="placeholder"
				maxlength="20"
				data-key="username"
				@input="inputChange"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input 
				class="input"
				type="digit" 
				:value="addressData.mobile" 
				placeholder="收货人手机号码" 
				maxlength="11" 
				data-key="mobile" 
				@input="inputChange" 
			/>
		</view>
		<view class="row b-b region">
			<text class="tit">地区选择</text>
			<view>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion"><h2>点击选择省市区</h2></pick-regions>
			</view>
		</view>
		<view class="row b-b region-text">
			<text class="tit"></text>
			<h3>{{ regionName }}</h3>
		</view>
		<view class="row b-b">
			<text class="tit">详细信息</text>
			<input
				class="input"
				type="text"
				:value="addressData.address"
				placeholder="街道、楼号、门牌"
				placeholder-class="placeholder"
				maxlength="80"
				data-key="address"
				@input="inputChange"
			/>
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.isdefault == 1" color="#fa436a" @change="switchChange" />
		</view>

		<button class="add-btn" @click="confirm" :disabled="submiting">提交</button>
	</view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';

export default {
	components: {
		pickRegions
	},
	data() {
		return {
			token: '',
			manageType: 'add',
			region: [],
			defaultRegion: ['北京市', '市辖区', '东城区'],
			defaultRegionCode: '376',
			addressData: {
				id: 0,
				username: '',
				mobile: '',
				province: 0,
				province_text: '',
				city: 0,
				city_text: '',
				district: 0,
				district_text: '',
				address: '',
				isdefault: 1
			},
			submiting: false
		};
	},
	computed: {
		regionName() {
			// 转为字符串
			return this.region.map(item=>item.name).join(' ');
		}
	},
	onLoad(option) {
		console.log('option', option);
		if(option.type && option.type != undefined){
			this.manageType = option.type;
		}
		
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo('/pages/public/login');
		}
		
		let title = '新增收货地址';
		if (option.type === 'edit') {
			title = '编辑收货地址';
			if(option.data){
				this.addressData = JSON.parse(option.data);
				this.region = [
					{"code":this.addressData.province,"name":this.addressData.province_text,"childs":[]},
					{"code":this.addressData.city,"name":this.addressData.city_text,"childs":[]},
					{"code":this.addressData.district,"name":this.addressData.district_text},
				];
			}
		}
		uni.setNavigationBarTitle({
			title
		});
		
	},
	methods: {
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this.addressData[key] = e.detail.value;
		},
		switchChange(e) {
			this.addressData.isdefault = e.detail.value ? 1 : 0;
		},
		// 获取选择的地区
		handleGetRegion(region) {
			this.region = region;
			console.log('region',this.region);
			this.addressData.province = region[0].code;
			this.addressData.city = region[1].code;
			this.addressData.district = region[2].code;
			this.addressData.province_text = region[0].name;
			this.addressData.city_text = region[1].name;
			this.addressData.district_text = region[2].name;
			console.log('addressData',this.addressData);
		},
		//提交
		confirm() {
			this.submiting = true;
			/* 数据验证模块*/
			let regex_username = /^[\u4e00-\u9fa5]{2,4}$/;
			if (!regex_username.test(this.addressData.username)) {
				this.$helper.toast('姓名格式错误','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.addressData.mobile)) {
				this.$helper.toast('输入正确手机号','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			if (!this.addressData.district) {
				this.$helper.toast('请选择省市区','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			if (!this.addressData.address) {
				this.$helper.toast('请输入详细信息','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			
			console.log('/pages/address/addressManage');
			const param = {};
			param.token = this.token;
			param.username = this.addressData.username;
			param.mobile = this.addressData.mobile;
			param.province = this.addressData.province;
			param.city = this.addressData.city;
			param.district = this.addressData.district;
			param.address = this.addressData.address;
			param.isdefault = this.addressData.isdefault;
			if(this.manageType == 'add'){
				//地址添加成功
				console.log('param', param);
				this.$http.request('User', 'addressadd', 'POST', param, (res) => {
					console.log('User/addressadd', res);
					this.submiting = false;
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('地址添加成功','sucess');
							//返回前一页
							setTimeout(()=>{
								uni.navigateBack();
							}, 800);
						}
					}
				});
				
			}else{
				//地址修改成功
				param.id = this.addressData.id;
				console.log('param', param);
				this.$http.request('User', 'addressedit', 'POST', param, (res) => {
					console.log('User/addressedit', res);
					this.submiting = false;
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('地址修改成功','sucess');
							//返回前一页
							setTimeout(()=>{
								uni.navigateBack(1);
							}, 800);
						}
					}
				});
				
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 150upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
	h2 {
		font-size: 30upx;
	}
	h3 {
		font-size: 30upx;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
